<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">progress</view>
			<view class="tui-page__desc">progress进度条</view>
		</view>
		<view class="tui-page__bd  tui-page__spacing">
			<tui-progress percent="60" show-info></tui-progress>
			<view class="tui-ptop">
				<tui-progress :percent="80" activeColor="#07c160" show-info></tui-progress>
			</view>
			<view class="tui-ptop">
				<tui-progress :percent="100" activeColor="linear-gradient(to right,#07c160,#ff7900)" show-info color="#ff7900"></tui-progress>
			</view>
			<view class="tui-ptop">
				<tui-progress radius="20rpx" :width="16" backgroundColor="#ECF2FF" activeColor="linear-gradient(to right,#5677fc,#EB0909)"
				 :percent="60"></tui-progress>
			</view>
			<view class="tui-short">
				<tui-progress show-info radius="0" :width="16" activeColor="#FFA424" color="#FFA424" backgroundColor="#FFDBA8"
				 :percent="60"></tui-progress>
			</view>
			<view class="tui-ptop">
				<tui-progress show-info radius="0" :width="16" activeColor="#FFA424" color="#FFA424" backgroundColor="#FFDBA8"
				 percent="94.5" :percentWidth="112"></tui-progress>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		}
	}
</script>

<style>
	.tui-ptop {
		padding-top: 72rpx;
	}

	.tui-short {
		width: 100%;
		padding: 72rpx 200rpx 0 0;
		box-sizing: border-box;
	}
</style>
